<template>
  <div class="home">
    <el-container>
      <el-header>


        <h1><img src="../assets/logo.png" alt="">在线后台管理系统</h1>

        <p>
          <el-dropdown @command="handleCommand()">
            <span class="el-dropdown-link">{{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" split-button>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '60px' : '200px'">
          <el-col>
            <p @click="dian()" id="kong">|||</p>
            <el-menu class="el-menu-vertical-demo" router :default-active='`${path}`' :collapse="isCollapse"
              background-color="#324057" text-color="#fff" active-text-color="#ffd04b">
              <el-menu-item index="/first">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>资金管理</span>
                </template>
                <el-menu-item-group>

                  <el-menu-item index="/moneyFlow">资金流向</el-menu-item>

                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>信息管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">个人信息</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import api from '../untils/index'
import { getUser } from '../untils/api'
export default {
  data() {
    return {
      isCollapse: false,
      name: '',
      path: 'home',
    };
  },
  methods: {
    dian() {
      this.isCollapse = !this.isCollapse
    },
    handleCommand() {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    }
  },
  created() {
    getUser().then(res => {
      console.log(res);
      this.name = res.data.name
    })
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(val);//新路由信息
        // console.log(oldval);//老路由信息
        sessionStorage.setItem('path',val)
        this.path=val.path
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>
<style lang="scss" scoped>
.el-header,
.el-aside {
  background-color: #324057
}

.el-aside,
.el-main {
  height: calc(100vh - 60px);
}

.el-header {
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30px;


  img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    vertical-align: middle;
  }
}

#kong {
  width: 100%;
  text-align: center;
  color: #fff;
}

.el-menu-vertical-demo,
.el-submenu,
.el-submenu__title {
  width: 100%;
}

.el-dropdown-link {
  color: #fff;
}
</style>

